<template>
	<view class="app">
		<custom-header title="考察点"></custom-header>
		<view class="content steps">
			<u-steps current="0" dot direction="column" activeColor="#99DAE0" inactiveColor="#99DAE0">
				<u-steps-item v-for="(item,index) in dotList">
					<view slot="icon" @click="hanleDetail(item.article_id)">
						<img src="../../static/img/slot.png" alt="" class="slot-icon" />
					</view>
					<view slot="desc" class="desc" @click="hanleDetail(item.article_id)">
						<view class="text">
							{{ item.article_title }}
						</view>
						<view class="flex address align-center">
							<image src="../../static/list/add.png" style="width: 30rpx;height: 30rpx;"></image>
							<text>{{ item.address }}</text>
						</view>
						<view class="go">
							<image :src="item.cover" mode="aspectFill" class="img_class"></image>
						</view>
					</view>
				</u-steps-item>
			</u-steps>
		</view>

		<custom-tabbar></custom-tabbar>
	</view>
</template>

<script>
	import {
		gmdList
	} from '../../api/fan';
	import a from '../../static/img/inspection/1.jpg';
	import b from '../../static/img/inspection/2.jpg';
	import c from '../../static/img/inspection/3.jpg';
	import d from '../../static/img/inspection/4.jpg';
	import e from '../../static/img/inspection/5.png';
	export default {
		data() {
			return {
				dotList: []
			};
		},
		onLoad() {
			let id = uni.getStorageSync("id")
			this.gmdLists(id)
		},
		methods: {
			gmdLists(id) {
				gmdList(id).then(res => {
					this.dotList = res.data.data
					console.log(this.dotList);
				})
			},
			hanleDetail(id) {
				console.log(id)
				// if(item.name=='预制菜之都体验中心'){
				// 	return
				// }
				uni.navigateTo({
					url: '/pages/index/detail?id=' + id,
					// events: {
					// 	acceptDataFromOpenedPage: function (item) {
					// 		console.log(item);
					// 	}
					// },
					// success(res) {
					// 	res.eventChannel.emit('acceptDataFromOpenerPage', {
					// 		data: item
					// 	});
					// }
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5fffe;
		padding: 10upx 1rem 200upx 1rem;
		background: url(../../static/index/Group.png) no-repeat;
		background-attachment: fixed;
		background-position: -180upx 450upx;
	}

	.steps {
		background-color: rgba(255, 255, 255, 0.5) !important
	}

	.content {
		background-color: white;
		margin-top: 120rpx;
		padding: 30rpx 20rpx 20rpx 30rpx;
		overflow: hidden;
		border-radius: 30rpx;

		// opacity: 0.8;
		text,
		view,
		img,
		image {
			background-color: rgba(255, 255, 255, 0.3) !important;
		}

		.desc {
			padding: 0 0 2rem 10rpx;

			.text {
				font-family: 'alimother';
				display: flex;
				align-items: center;
				font-size: 40rpx;
				font-weight: 600;
				color: rgb(41, 64, 58)
			}

			.address {
				margin: 0.5rem 0;
			}
		}
	}

	.bgW {
		width: 100vw;
		height: 200upx;
		background-color: white;
		position: fixed;
		bottom: 0;
		right: 0;
	}

	.img_class {
		width: 100%;
		height: 300rpx;
		border-radius: 10px;
	}

	.slot-icon {
		position: relative;
		top: 9rpx;
		width: 41rpx;
		height: 41rpx;
	}
</style>